<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>Soshalboard</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Get deals that you want">
    <meta name="author" content="soshalboard">

    <link href="lib/soshalib/main.css" rel="stylesheet" type="text/css"/>

    <link href="lib/bootstrap/2.3.2/css/bootstrap.css"   rel="stylesheet">
    <link href="lib/css/select2.css" rel="stylesheet" type="text/css"/>
    <link href="lib/css/carousel.css" rel="stylesheet" type="text/css" />

    <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400|Belleza' rel='stylesheet' type='text/css'>


    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
</head>

<body onload="checkFBLogin();" style="background: #ccc">
<script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
        (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
            m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

    ga('create', 'UA-45493446-1', 'soshalboard.com');
    ga('send', 'pageview');

</script>

<div id="fb-root"></div>


<div id="main_wrapper" class="container-fluid" style="display: none">
    <div id="myCarousel" class="carousel slide">
        <div class="carousel-inner">
            <div class="item active">
                <img src="assets/images/nogin-main.jpg" alt="">
                <div class="container">
                    <div class="carousel-caption">
                        <h1>Example headline.</h1>
                        <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                        <div id="auth-loggedout" onclick="fbLogin()">
                            <div class="fb-login-button">
                                <button class="rounded Button hasText Module large ajax btn unAuthFacebookConnect registerLoginButton" type="button">
                                    <span class="buttonText">Login with Facebook</span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="item">
                <img src="assets/images/nogin-main.jpg" alt="">
                <div class="container">
                    <div class="carousel-caption">
                        <h1>Another example headline.</h1>
                        <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                        <div id="auth-loggedout" onclick="fbLogin()" >
                            <div class="fb-login-button">
                                <button class="rounded Button hasText Module large ajax btn unAuthFacebookConnect registerLoginButton" type="button">
                                    <span class="buttonText">Login with Facebook</span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="item">
                <img src="assets/images/nogin-main.jpg" alt="">
                <div class="container">
                    <div class="carousel-caption">
                        <h1>One more for good measure.</h1>
                        <p class="lead">Cras justo odio, dapibus ac facilisis in, egestas eget quam. Donec id elit non mi porta gravida at eget metus. Nullam id dolor id nibh ultricies vehicula ut id elit.</p>
                        <div id="auth-loggedout" onclick="fbLogin()">
                            <div class="fb-login-button">
                                <button class="rounded Button hasText Module large ajax btn unAuthFacebookConnect registerLoginButton" type="button">
                                    <span class="buttonText">Login with Facebook</span>
                                </button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <a class="left carousel-control" href="#myCarousel" data-slide="prev">&lsaquo;</a>
        <a class="right carousel-control" href="#myCarousel" data-slide="next">&rsaquo;</a>
    </div><!-- /.carousel -->

    <div class="container marketing">

        <!-- Three columns of text below the carousel -->
        <div class="row-fluid">
            <div id="auth-loggedout" onclick="fbLogin()" style="display: none;">
                <div class="fb-login-button">
                    <button class="rounded Button hasText Module large ajax btn unAuthFacebookConnect registerLoginButton" type="button">
                        <span class="buttonText">Login with Facebook</span>
                    </button>
                </div>
            </div>
        </div><!-- /.row -->


        <!-- START THE FEATURETTES -->

        <hr class="featurette-divider">

        <div class="featurette">
            <img class="featurette-image pull-right" src="../assets/img/examples/browser-icon-chrome.png">
            <h2 class="featurette-heading">First featurette headling. <span class="muted">It'll blow your mind.</span></h2>
            <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
        </div>

        <hr class="featurette-divider">

        <div class="featurette">
            <img class="featurette-image pull-left" src="../assets/img/examples/browser-icon-firefox.png">
            <h2 class="featurette-heading">Oh yeah, it's that good. <span class="muted">See for yourself.</span></h2>
            <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
        </div>

        <hr class="featurette-divider">

        <div class="featurette">
            <img class="featurette-image pull-right" src="../assets/img/examples/browser-icon-safari.png">
            <h2 class="featurette-heading">And lastly, this one. <span class="muted">Checkmate.</span></h2>
            <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
        </div>

        <hr class="featurette-divider">

        <!-- /END THE FEATURETTES -->


        <!-- FOOTER -->
        <footer>
            <p class="pull-right"><a href="#">Back to top</a></p>
            <p>&copy; 2013 Company, Inc. &middot; <a href="#">Privacy</a> &middot; <a href="#">Terms</a></p>
        </footer>

    </div><!-- /.container -->
</div>


<div id="mainmenu" class="navbar navbar-inverse navbar-fixed-top     affix-top" style="display: none">
    <div class="navbar">
        <div class="navbar-inner">
            <div class="container-fluid">
                <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </a>
                <a href="#" class="brand">Soshalboard</a>

                <div class="nav-collapse collapse">
                    <ul class="nav">
                        <li class="active"><a href="#">Home</a></li>
                        <li><a href="/user/me">Wishlist</a></li>
                        <li><a href="/about.html">About</a></li>
                    </ul>
                    <ul class="nav pull-right" id="userrightmenu" style="display: none;">
                        <li id="fat-menu" class="dropdown">
                            <a href="#" id="username" role="button" class="dropdown-toggle" data-toggle="dropdown">Logging in.. <b class="caret"></b></a>
                            <ul class="dropdown-menu" role="menu" aria-labelledby="drop3">
                                <li><a tabindex="-1" href="userprofile.html">Profile</a></li>
                                <li class="divider"></li>
                                <li><a tabindex="-1" onclick="doLogout();">Logout</a></li>
                            </ul>
                        </li>
                    </ul>
                </div>
                <!--/.nav-collapse -->
            </div>
        </div>
    </div>
</div>

<div class="container-fluid" id="appcontainer" style="display: none">
    <form class="form-horizontal">

        <legend>What do you want?</legend>
        <div class="row-fluid">
            <div class="span8">
                <div id="diverror" class="row-fluid" style="display: none">
                    <div class="span12">
                        <div class="alert alert-error">
                            <a href="#" class="close" data-dismiss="alert">×</a>
                            Error Messages.
                        </div>
                    </div>
                </div>
                <div id='basicwish' class="row-fluid" style="display: none">
                    <div class="row-fluid">
                    </div><!--/row-->
                    <div class="row-fluid  span8">
                            <div class="control-group">
                                <label id="chooseCity" class="control-label" for="cityselect">I live in </label>
                                <div class="controls" id="selectcity">
                                    <select name="type" id="cityselect"></select>
                                </div>
                            </div>
                    </div>
                    <div class="row-fluid  span8">
                            <div class="control-group">
                                <label id="labelIwantTo" class="control-label" for="inputType">And I want to </label>
                                <div class="controls" id="selectwishtype">
                                    <select name="type" id="inputType"></select>
                                </div>
                            </div>
                    </div>
                    <div class="row-fluid   span8">
                            <div class="control-group">
                                <label class="control-label" for="inputName">a</label>
                                <div class="controls" id='divinputname'>
                                    <input type="hidden" class="inputName span7" id="inputName"/>
                                </div>
                            </div>
                    </div>
                    <div class="row-fluid   span8" id="submitrow">
                        <div class="control-group">
                            <div class="controls">
                                <button type="button" class="btn" id="firstsubmit" style="display:none;">Tell us some more</button>
                            </div>
                        </div><!--/span-->
                        <div class="span3"></div>

                    </div><!--/row-->
                </div><!--/row-->
                <div id="moredetails" style="display: none;">
                    <fieldset>
                        <legend>Enter details of your wish</legend>
                        <div class="row-fluid span8">
                                <div class="control-group">
                                <label class="control-label" for="description">Describe your wish</label>
                                    <div class="controls">
                                        <input type="text" class="input-xxlarge" placeholder="Description of your wish" id="description">
                                    </div>
                                </div>
                        </div>
                        <div class="row-fluid span8">
                                <div class="control-group">
                                <label class="control-label" for="price">Enter Expected price</label>
                                    <div class="controls" id="divprice">
                                        <input type="number" id="price" placeholder="Enter price">
                                    </div>
                                </div>
                        </div>
                        <div class="row-fluid span8">
                                <div class="control-group">
                                <label class="control-label" for="brand">Any Specific brand you want?</label>
                                    <div class="controls">
                                        <input type="text" id="brand" placeholder="Enter brand?">
                                    </div>
                                </div>
                        </div><!--/row-->
                        <div class="row-fluid span8">
                                <div class="control-group">
                                    <div id="submitdetails" class="controls">
                                        <button type="button" class="btn">Add to your wishlist</button>
                                    </div>
                                </div>
                        </div>  <!--/row-->
                    </fieldset>
                </div>
            </div><!--/span-->

            <div class="span4">

            </div><!--/span-->
        </div><!--/row-->
    </form>

</div><!--/.fluid-container-->

<script src="lib/js/jquery-1.10.2.js"></script>
<script src="lib/bootstrap/2.3.2/js/bootstrap.js"></script>
<script src="lib/js/select2.js"></script>

<script src="http://ajax.cdnjs.com/ajax/libs/underscore.js/1.1.4/underscore-min.js"></script>
<script src="http://ajax.cdnjs.com/ajax/libs/backbone.js/0.3.3/backbone-min.js"></script>

<script src="lib/soshalib/user.js"></script>
<script src="lib/soshalib/category.js"></script>
<script src="lib/soshalib/wishlist.js"></script>


 <script>

	window.fbAsyncInit = function() {
    // init the FB JS SDK
		FB.init({
			appId		: '454209954617767',	// App ID from the app dashboard
		//	appId		: '237284726429495',
			channelUrl	: '/channel.html',   	// Channel file for x-domain comms
			status		: true,					// Check Facebook Login status
			xfbml		: true					// Look for social plugins on the page
		});

        fbApiInit = true;
		// Additional initialization code such as adding Event Listeners goes here
    };
	        // listen for and handle auth.statusChange events
    function fbLogin(){
          FB.login(function(response) {
              if (response.status === 'connected' ) {
                  // the user is logged in and has authenticated your
                  // app, and response.authResponse supplies
                  // the user's ID, a valid access token, a signed
                  // request, and the time the access token
                  // and signed request each expire
                  document.getElementById('main_wrapper').style.display = 'none';
                  document.getElementById('auth-loggedout').style.display = 'none';
                  document.getElementById('main_wrapper').style.display = 'none';
                  document.getElementById('mainmenu').style.display = 'block';
                  getDataFromFBAndgetSessionToken();
                  localStorage.setItem("login","true");
                  getDataFromFBAndgetSessionToken();
              } else if (response.status === 'not_authorized') {
                  // the user is logged in to Facebook,
                  // but has not authenticated your app
                  document.getElementById('main_wrapper').style.display = 'block';
                  document.getElementById('auth-loggedout').style.display = 'block';
                  document.getElementById('appcontainer').style.display = 'none';
                  document.getElementById('mainmenu').style.display = 'none';
              } else {
                  // the user isn't logged in to Facebook.
                  document.getElementById('main_wrapper').style.display = 'block';
                  document.getElementById('auth-loggedout').style.display = 'block';
                  document.getElementById('appcontainer').style.display = 'none';
                  document.getElementById('mainmenu').style.display = 'none';
              }
          });

    }


  // Load the SDK asynchronously
  (function(d, s, id){
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) {return;}
     js = d.createElement(s); js.id = id;
     js.src = "//connect.facebook.net/en_US/all.js";
     fjs.parentNode.insertBefore(js, fjs);
   }(document, 'script', 'facebook-jssdk'));

    </script>

<script>

function checkFBLogin(callback){
    if(!window.fbApiInit) {
        setTimeout(function() {checkFBLogin(callback);}, 50);
    } else {
        var applogin = localStorage.getItem("login");
        if (applogin === "true")
        {
            FB.getLoginStatus(function(response) {
                if (response.status === 'connected') {
                    // the user is logged in and has authenticated your
                    // app, and response.authResponse supplies
                    // the user's ID, a valid access token, a signed
                    // request, and the time the access token
                    // and signed request each expire

                    document.getElementById('main_wrapper').style.display = 'none';
                    document.getElementById('mainmenu').style.display = 'block';
                    document.getElementById('appcontainer').style.display = 'block';

                    getDataFromFBAndgetSessionToken();
                } else if (response.status === 'not_authorized') {
                    // the user is logged in to Facebook,
                    // but has not authenticated your app
                    document.getElementById('main_wrapper').style.display = 'block';
                    document.getElementById('appcontainer').style.display = 'none';
                    document.getElementById('mainmenu').style.display = 'none';
                    localStorage.removeItem("login");
                } else {
                    // the user isn't logged in to Facebook.
                    document.getElementById('main_wrapper').style.display = 'block';
                    document.getElementById('appcontainer').style.display = 'none';
                    document.getElementById('mainmenu').style.display = 'none';
                    localStorage.removeItem("login");
                }
            });
        } else {
            document.getElementById('main_wrapper').style.display = 'block';
            document.getElementById('appcontainer').style.display = 'none';
            document.getElementById('mainmenu').style.display = 'none';

        }
    }

    }

var currSessionID = "";

var userFirstName = "";
var varAccessToken = "";
function getDataFromFBAndgetSessionToken() {
    FB.api('/me?fields=id,name,first_name,last_name,username', function (response) {

        if (!response || response.error) {
            document.getElementById('auth-loggedout').style.display = 'block';
            document.getElementById('appcontainer').style.display = 'none';
            localStorage.removeItem("login");
        } else {
            varAccessToken = FB.getAuthResponse()['accessToken'];

            userFirstName = response.first_name;

            var User = new classUser();
            User.set_access_token(varAccessToken);
            User.set_fb_user_id(response.id);
            User.set_first_name(userFirstName);
            User.set_last_name(response.last_name);
            User.set_user_name(response.username);

            User.save(mycallback);
        }
    });
}

function mycallback(error, sessId){
    if(error) {
        console.log("Some error occurred. Check code");
    } else {
        console.log("Session : " + sessId);
        currSessionID = sessId;
        localStorage.setItem('currentUserSession', sessId);
        localStorage.setItem('userFirstName', userFirstName);
        getDatatoCreateDisplay();
    }
}

function getDatatoCreateDisplay() {

    showRightMenu();
    $.ajax({
        type: "GET",
        url: "http://localhost:8080/soshal/api/1.0/category/" + currSessionID,
        dataType: "json",
        success: function (apiResponse) {
            typeOptionsHTML = '';
            var newOptions=[];
            var checkCase=[];
            var typeOptionsHTML="";


            $.each(apiResponse["types"], function( index, value ) {
                typeOptionsHTML = typeOptionsHTML + "<option value='" + value + "'>" + value + "</option>";
            });


            var json_obj = $.parseJSON(JSON.stringify(apiResponse["categories"]));//parse JSON
            for (var i in json_obj)
            {
                lowercasename =  json_obj[i].name.toLowerCase();
                var currID =  json_obj[i].id;
                var pos = jQuery.inArray(lowercasename, checkCase);

                if (pos === -1)
                {
                    checkCase.push(lowercasename);
                    newOptions.push(new OptionData(currID, lowercasename));
                }
            }

            citylist = ["Los Altos", "Minneapolis", "Mountain View", "Palo Alto","Santa Clara","Sunnyvale"];
			
			cityoptions='';
			$.each(citylist, function( index, value ) {
                    cityoptions = cityoptions + "<option value='" + value + "'>" + value + "</option>";
			});
			
		
            $("#loading").css("display", "none");
			$('#cityselect').append(cityoptions);
			$('#inputType').append(typeOptionsHTML);
			$('.inputName').select2({
                createSearchChoice: function (term, data) {
                    if ($(data).filter(function () {
                        return this.text.localeCompare(term) === 0;
                    }).length === 0) {
                        return {
                            id: term,
                            text: term
                        };
                    }
                },
                data: function(){return {results: newOptions};}
            });


            $("#appcontainer").css("display", "block");
            $('#basicwish').show();
            $("#firstsubmit").css("display", "block");
        },
        error: function (apiResponse) {
            alert("error  : " + apiResponse);
        }
    });
}

function showRightMenu(){
    var userFirstName = localStorage.getItem('userFirstName');
    $('#username').text("Logged in as "+userFirstName);
    $('#userrightmenu').show();
};

function doLogout(){
    localStorage.setItem("login","false");
    window.location.href = "/";
};


function OptionData(id,value) {
    this.id=id;
    this.text=value;
}

$("#price").keydown(function(event) {
    // Allow: backspace, delete, tab, escape, enter and .
    if ( $.inArray(event.keyCode,[46,8,9,27,13,190]) !== -1 ||
        // Allow: Ctrl+A
            (event.keyCode == 65 && event.ctrlKey === true) ||
        // Allow: home, end, left, right
            (event.keyCode >= 35 && event.keyCode <= 39)) {
        // let it happen, don't do anything
        return;
    }
    else {
        // Ensure that it is a number and stop the keypress
        if (event.shiftKey || (event.keyCode < 48 || event.keyCode > 57) && (event.keyCode < 96 || event.keyCode > 105 )) {
            event.preventDefault();
        }
    }
});

$('#firstsubmit').click(function () {
    $('#submitrow').remove();
    $('#firstsubmit').hide();
    $('#moredetails').show();
});

$('#submitdetails').click(function (event) {
    event.preventDefault();
    var categoryName = $(inputName).select2('data').text;
    var categoryType = $('#inputType').val();

    var error = "false";

    if ($('#price').val()) {
        $("#divprice").removeClass("control-group error");
        var priceValue = $('#price').val();
    }
    else {
        $("#divprice").addClass("control-group error");
        error = true;
    }

    var brandValue = $('#brand').val();

    if ($('#description').val()) {
        $("#description").removeClass("control-group error");
        var currWishDetails = $('#description').val();
    }
    else {
        $("#description").addClass("control-group error");
        error = true;
    }

    if (error === "false") {

        var wish = new classWish();

        wish.set_category(categoryName, categoryType);
        wish.set_additional_comments('details:'+currWishDetails + ', price:' + priceValue +', brand:'+brandValue);

        wish.save(currSessionID);

    }

});



</script>
</body>
</html>
